<template>
  <a-input-group compact @keyup.enter="onSearch">
    <a-select v-model:value="selectVal" :style="{ width: selectWidth }" :options="options" v-bind="$attrs" />
    <a-input-search v-model:value="searchVal" v-bind="$attrs" :style="{ width: inputWidth }" @search="onSearch" />
  </a-input-group>
</template>

<script>
export default {
  name: 'select-input-group',
  props: {
    /* options: [ { value, label, disabled, key, title } ] */
    options: { type: Array, default: () => [] },
    selectWidth: { type: [String], default: '30%' },
    inputWidth: { type: [String], default: '70%' },
  },
  data() {
    return {
      selectVal: undefined,
      searchVal: '',
    };
  },
  watch: {
    options: {
      immediate: true,
      deep: true,
      handler(options) {
        if (options && options.length) {
          this.selectVal = options[0].value;
        } else {
          this.selectVal = undefined;
        }
      },
    },
  },
  methods: {
    clear() {
      this.searchVal = '';
      this.$emit('clear');
    },
    onSearch() {
      const val = String(this.searchVal).trim();
      if (!val) {
        this.clear();
      } else {
        this.$emit('search', { [this.selectVal]: val });
      }
    },
  },
};
</script>

<style lang="less">
.ant-input-search {
  .ant-input-suffix {
    .ant-input-search-icon {
      color: #ffffff;
    }
  }
}
</style>
